<template>
  <view :style="listHeightStylePage" class="job-page-container">
    <u-navbar :title="title" placeholder @leftClick="rightClick" :border="false" :shadow="true"></u-navbar>

    <view class="search-container">
      <view class="search-box">
        <u-search placeholder="请输入岗位名称" v-model="keywords" :showAction="false" @change="changeSearch" bgColor="#f5f5f5"
          shape="square"></u-search>
      </view>
    </view>


    <scroll-view :style="listHeightStyle" class="job-list-container" scroll-y="true">
      <view style="padding: 10rpx 20rpx;" class="ListItem">
        <view v-for="(item, index) in list" :key="index" class="job-item" @click="Selectdata(item)">
          <view class="job-name">{{ item.name }}</view>
          <!-- <view class="job-dept">{{ item.dept_name }}</view> -->
        </view>

        <view v-if="list.length == 0" class="no-more-text">
          没有更多数据了
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import org from '@/apis/cloud/org.js';
export default {
  name: 'joBpage',
  data () {
    return {
      title: '选择岗位',
      keywords: '',
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      appHeight: 0,
      listHeightStylePage: {},
      total: 0,
      list: [],
      searchTimer: null, // 防抖定时器 
      debounceTime: 500, // 防抖延迟时间(毫秒)
      fuzhiItemid: null
    }
  },
  onLoad (option) {
    console.log('option', option);

    this.title = option.title
    this.fuzhiItemid = option.fuzhiItemid
  },
  created () {
    // #ifdef H5
    this.listHeightStylePage = {
      height: `${window.innerHeight}px`,
    };
    // #endif 

    // #ifdef APP-PLUS 
    this.listHeightStylePage = {
      height: `100vh`,
    };
    // #endif 
    let app = uni.getSystemInfoSync();
    this.appHeight = app.windowHeight;
    this.calculateListHeight();
    this.getInfo()
  },
  onUnload () {
    clearTimeout(this.searchTimer);
  },
  methods: {
    calculateListHeight () {
      const windowHeight = window.innerHeight;  // 视口高度
      const navbarHeight = 44; // 导航栏高度（假设为 44px）
      const searchHeight = 51; // 搜索框高度

      // #ifdef APP-PLUS 
      this.listHeightStyle = {
        overflowY: 'hidden',
        height: `${this.appHeight - 125}px`,
      };
      // #endif 

      // #ifdef H5 
      const listHeight = windowHeight - navbarHeight - searchHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden'
      };
      // #endif
    },
    changeSearch (value) {
      // 清除之前的定时器
      clearTimeout(this.searchTimer);

      // 如果输入为空，立即执行搜索 
      if (!value) {
        this.getInfo();
        return;
      }

      // 设置新的防抖定时器 
      this.searchTimer = setTimeout(() => {
        // 显示加载状态 
        uni.showLoading({
          title: '加载中'
        });
        let jsonData = {
          org: 'role',
          userName: value
        };

        try {
          org.FormGroupuser(jsonData).then(res => {
            if (res.status > 0) {
              this.list = res.data;
            }
            uni.hideLoading();
            this.isRefreshing = false;
          }).catch(err => {
            console.error(' 请求失败', err);
            uni.hideLoading();
            this.isRefreshing = false;
          });
        } catch (err) {
          console.error(' 请求失败', err);
          uni.hideLoading();
          this.isRefreshing = false;
        }
      }, this.debounceTime);
    },
    getInfo () {
      uni.showLoading({
        title: '加载中'
      });

      let jsonData = {
        type: 'role',
      }

      try {
        org.FormGroupTree(jsonData).then(res => {
          if (res.status > 0) {
            this.list = res.data;
            uni.hideLoading();
          } else {
            uni.hideLoading();
          }
          this.isRefreshing = false;
        })
      } catch (err) {
        console.error(' 请求失败', err);
        this.isRefreshing = false;
      }
    },
    Selectdata (value) {
      uni.$emit('RolePicker', {
        ...value,
        fuzhiItemid: this.fuzhiItemid
      })
      this.rightClick()
    },
    rightClick () {
      uni.navigateBack({ delta: 1 });
    },
  }
}
</script>

<style lang="scss" scoped>
.job-page-container {
  background-color: #f8f8f8;
  flex-direction: column;
}

.search-container {
  padding: 16rpx 16rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .search-box {
    border-radius: 8rpx;
    overflow: hidden;
  }
}

.job-list-container {


  .ListItem {
    .job-item {
      background-color: #ffffff;
      margin-bottom: 10rpx;
      border-radius: 20rpx;
      padding: 10rpx 10rpx;
      position: relative;

      .job-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 8rpx;
      }

      .job-dept {
        font-size: 26rpx;
        color: #999;
      }

      .divider {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1rpx;
        background-color: #eee;
      }
    }
  }


}



.empty-state {
  padding-top: 100rpx;
}

.load-more {
  padding: 30rpx 0;
}


.no-more-text {
  margin-top: 20rpx;
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
}
</style>